import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入vuex实例拿到store,因为之前页面中直接this.$store就可以,但是js里面想要拿到需要export导出 拿到store   这个store 就===页面中的this$store
import store from '../store'
console.log('获取导入的store:', store)
/**
 * 路由配置
 */
/**
 * 前端路由配置的两种方式
 * 1. hash模式(默认)
 * 2. history模式
 * 相同点：都可以实现路由配置和跳转（功能一样）
 * 不同点：路由的路径不一样=》hash模式带个#号；history不带
 * 使用场景：
 * 一般使用hash模式，因为hash可以运行在所有浏览器（兼容性好）；
 * 但是history模式只能在支持history api的浏览器运行
 */

// 布局组件(一) =>:布局组件(公共的头部+router-view(二级路由挂载点)+菜单
const Layout = () => import('../views/layout-A.vue')// 父下面四个是它的子文件
// 首页（第一个标签页）二级路由
const Index = () => import('@/views/home-a/index.vue')
// 问答
const Question = () => import('@/views/question-a/index.vue')
// 视频
const Video = () => import('@/views/video-a/index.vue')
// 个人中心
const Profile = () => import('@/views/profile-a/index.vue')
// 一级路由
// 登录
const Login = () => import('@/views/login/index.vue')
// 编辑个人资料
const User = () => import('@/views/user/edit.vue')
// 小智
const Chat = () => import('@/views/user/chat.vue')
// 搜索
const Search = () => import('@/views/search/index.vue')
const Result = () => import('@/views/search/result.vue')
// 详情
const Article = () => import('@/views/article/index.vue')

// 方法一
// import Login from '../views/login'
// 路由配置的懒加载,也叫按需导入
// const Login = () => ('../views/login')

// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题/解决设置门卫后报错的问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    // 布局骨架
    // 这里面放公共的头,这样实现首页样式不变下面二级路由变
    component: Layout,
    // 二级路由
    children: [
      {
        path: '/',
        name: 'index',
        // 首页
        component: Index
      },
      {
        path: '/question',
        name: 'question',
        // 问答
        component: Question
      },
      {
        path: '/video',
        name: 'video',
        // 视频
        component: Video
      },
      {
        path: '/user',
        name: 'user',
        // 个人中心
        component: Profile
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    // 登录
    component: Login
  },
  {
    path: '/user/profile',
    name: 'profile',
    // 编辑资料
    component: User
  },
  {
    path: '/user/chat',
    name: 'chat',
    // 小智同学
    component: Chat
  },
  {
    path: '/search',
    name: 'search',
    // 搜索
    component: Search
  },
  {
    path: '/search/result',
    name: 'result',
    // 搜索结果
    component: Result
  },
  {
    path: '/article/:id',
    name: 'article',
    // 文章详情
    component: Article
  }

]

const router = new VueRouter({
  routes
})

// 要在new之后设置前门保安,因为要在实例身上添加保安,需求:要控制'/user'开头的页面访问,如果没有跳转到登录
// router实例beforeEach()是前置保安的公式
/**
 * to 去哪
 * form从哪来
 * next方法(方行)
 */
router.beforeEach((to, from, next) => {
  const { user } = store.state
  // to.path.startsWith('跳转的页面'):是否是什么什么开头
  if (to.path.startsWith('/user') && !user.token) {
    // 用户是'/user'页面但是没有token禁止,返回到登录页面,有token的话方行
    // next() ===router.push一样也可以跳转登录页
    // 需求:把用户当前访问的没登录页面path当做参数(to.path)带到登录页=>登录成功后,跳到上次访问的页面
    next(`/login?redirectUrl=${to.path}`)
  } else {
    // 放行
    next()
  }
})

export default router
